<template>
  <div class="option-group">
    <div v-for="(row, index) in curopOptions" :key="index">
      <div v-for="(item, index) in row" :key="index">
        <div v-for="(val, key, index) in item" :key="index">
            <el-button-group v-if="key.startsWith('p')">
              <el-button 
                v-for="(pOption) in val.option"
                :key="pOption.id" 
                size="small"  
                @click="clickThirdMenu({'key':key, 'active':pOption.id})"
                :class="val.active == pOption.id ? 'active' :''"
                >
                <!-- 与职住模块的 按钮组菜单active重复（冲突）  比如通勤监测需要点击两遍才有效果-->
                <!-- :class="val.active == pOption.id ? 'active' :''" -->
                {{pOption.label}}
              </el-button>
            </el-button-group>
        </div>
      </div>
    </div>
    
    
  </div>
</template>

<script>
export default {
  name: 'Options',
  computed:{
    curBtnGroupActive(){
      return this.$store.getters.curBtnGroupActive
    },
    curopOptions(){
      return this.$store.getters.curopOptions
    },
    defaultMenu(){
      return this.$store.getters.defaultMenu
    }
  },
  watch:{
    curBtnGroupActive(val){
      if(val == '2'){
        if(this.defaultMenu == '3'){
          this.$store.dispatch('isShowXZList',true);
          this.$store.dispatch('changeCode',110112119000)
        }else{
          this.$store.dispatch('isShowXZList',false);
        }
      }else{
        this.$store.dispatch('isShowXZList',false);
      }
    }
  },
  methods:{
    clickThirdMenu(obj){
      this.$store.dispatch('changeThirdMenu',obj)
    },
    handleMenu(obj){
      this.$store.dispatch('changeOptionActive',obj)
    }
  },
  beforeCreate(){
    // 初始化菜单
    // option = [
    //   {key:val}
    // ]
    // select = [
    //   {key:val},
    //   {key:val},
    // ]

    // params = {
    //   ...option,
    //   ...select
    // }
    this.$store.dispatch('updataOPoptions', 'transport=taxi&action=o&')
  },
}
</script>
<style lang="stylus" scoped>
.option-group
  position absolute
  z-index 50
  top 125px
  left 15px

  /deep/ .el-button-group
    box-shadow  5px 5px 5px rgba(0,0,0,0.8)
  
  >div
    overflow hidden

  >div
    >div
      float left
      margin-right 10px

  >div
    >div
      >div
        margin-bottom 10px

  /deep/ input[type=text]
    background linear-gradient(to left, rgba(62,73,103,0.7) , rgba(48,58,88,1))
    border 1px solid rgba(48,58,88,1)
    // padding 1.35rem 1.75rem
    box-shadow 5px 5px 5px rgba(0,0,0,.8)

  /deep/ .el-cascader .el-input.is-focus .el-input__inner
    border-color rgba(48,58,88,1)

  /deep/ .el-cascader__label
    color #C0C4CC
  
  /deep/ .el-cascader__label span
    color #C0C4CC

  /deep/ .el-button
    background #303a58
    // border 1px solid rgba(62,73,103,0.7)
    border 1px solid  #303a58
    color #C0C4CC

  /deep/ .el-button.active
    color #13ffd7

</style>
